<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>P.S.T.</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
html, body {
	width: 100%;
	height: 100%;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#info {
    margin-top: 10px;
}
#container{
	width: 100%;
	height: 100%;
}
.warning_icon{
	width: 40px;
	height: 40px;
	float: left;
}
.text{
	line-height: 25px;
	font-size: 20px;
	padding-left: 10px;
}
.smnoprint{
	display: none!important;
}
.title{
	position: fixed;
	font-size: 18px;
	top: 20px;
	left: 20px;
	z-index: 20000;
}
#clear_btn{
	width: 70px;
	height: 25px;
	font-size: 14px;
	line-height: 25px;
	border-radius: 4px;
	position: fixed;
	right: 10px;
	top: 5px;
	background: #fff;
	z-index: 20000;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid #ccc;
}

/*img.csssprite{*/
a[title="到腾讯地图查看此区域"]{
	display: none!important;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=7S7BZ-DEIC4-BYKU5-D7QID-L5IQ2-GYB7O"></script>
<script>
var hopy = {
	center: null,
	map: null,
	infoWin: null,
	warning_text: "",
	old_text: "",
	init: function() {
	    this.center = new qq.maps.LatLng(32.376560,120.583660);
	    const that = this
	    this.map = new qq.maps.Map(document.getElementById('container'),{
	        center: that.center,
	        zoom: 18
	    });
	    this.infoWin = new qq.maps.InfoWindow({
	        map: that.map
	    });
	   	window.setInterval((function(){this.makeRequest();}).bind(this), 500);
	   	this.clear_btn = document.getElementById('clear_btn'),
	    this.clear_btn.addEventListener('click', function(){that.del();});
	},
	makeRequest: function() {
		const that = this;
		httpRequest = new XMLHttpRequest();

	    httpRequest.onreadystatechange = function() {
	    	const warning = {"/a1l7anRRgND/demo0/alarm0":"这里有一个高龄人士心脏病发作","/a1l7anRRgND/demo0/alarm1":"这里有一个高龄人士癫痫发作","/a1l7anRRgND/demo0/alarm2":"这里有一个高龄人士受到了撞击"}
	    	if (httpRequest.readyState === XMLHttpRequest.DONE) {
		      if (httpRequest.status === 200) {
		        console.log(httpRequest.responseText);
		        if(httpRequest.responseText != "null" && httpRequest.responseText != ""){
		        	if(warning[httpRequest.responseText] == that.old_text){
		        		return;
		        	}
		        	that.warning_text = warning[httpRequest.responseText];
		        	that.old_text = warning[httpRequest.responseText];
		        	that.addMark();
		        }else{
		        	that.clear();
		        }
		      } else {
		        console.log('There was a problem with the request.');
		      }
		    }
	    }
	    httpRequest.open('GET', '/r');
	    httpRequest.send();
	},
	addMark: function() {
		const that = this
		this.map.setCenter(that.center);
		this.infoWin.open();
	    //tips  自定义内容
	    this.infoWin.setContent('<img src="Warning.png" alt="" class="warning_icon">'+'<div style="width:200px;float:left;" class="text">'+that.warning_text+'</div>');
	    this.infoWin.setPosition(this.center);
	    this.marker = new qq.maps.Marker({
	        position: that.center,
	        map: that.map,
	    });
	    var anchor = new qq.maps.Point(10, 10),
	          size = new qq.maps.Size(22, 22),
	          origin = new qq.maps.Point(0, 0),
		      markerIcon = new qq.maps.MarkerImage(
	      "circle.png",
	      size, 
	      origin,
	      anchor
	    );
	    this.marker.setIcon(markerIcon);
	    this.marker.setVisible(true);
	    this.clear_btn.style.display="block";
	},
	clear: function () {
		this.infoWin.close();
		if(this.marker){
			this.marker.setVisible(false);
		}
		this.clear_btn.style.display="none";
	},
	del: function () {
		const that = this;
		httpRequest = new XMLHttpRequest();

	    httpRequest.onreadystatechange = function() {
	    	const warning = {"/a1l7anRRgND/demo0/alarm0":"这里有一个高龄人士心脏病发作","/a1l7anRRgND/demo0/alarm1":"这里有一个高龄人士癫痫发作","/a1l7anRRgND/demo0/alarm2":"这里有一个高龄人士受到了撞击"}
	    	if (httpRequest.readyState === XMLHttpRequest.DONE) {
		      if (httpRequest.status === 200) {
		        console.log(httpRequest.responseText);
		        if(httpRequest.responseText == "success"){
		        	
		        }
		      } else {
		        console.log('There was a problem with the request.');
		      }
		    }
	    }
	    httpRequest.open('GET', '/d');
	    httpRequest.send();
	}
}
window.addEventListener('load',function(){this.hopy.init();});
</script>
</head>
<body>
	<div class="title">上海埃根-P.S.T.</div>
	<div id="clear_btn" style="display: none;">消除警报</div>
    <div id="container"></div>
    
</body>
</html>